import React, { useState } from "react";

import Horizen from "../../baseUI/horizen-item/horizenItem";
import Scroll from "../../components/scroll/scroll";
import { categoryTypes, alphaTypes } from "../../api/config";
import { NavContainer, List, ListItem, ListContainer } from "./singersStyles";

function Singers(props: csc.Props) {
    let [category, setCategory] = useState('');
    let [alpha, setAlpha] = useState('');

    let handleUpdateCatetory = (val: any) => {
        setCategory(val)
    }
    
    let handleUpdateAlpha = (val: any) => {
        setAlpha(val);
    };

    const singerList = new Array(12).fill(12).map((item, index) => {
        return {
            picUrl: 'https://p2.music.126.net/uTwOm8AEFFX_BYHvfvFcmQ==/109951164232057952.jpg',
            name: '莫莫酱',
            accountId: 277313426
        }
    });

    // 渲染函数, 返回歌手列表
    const renderSingerList = () => {
        return (
            <List>
                {
                    singerList.map((item, index) => {
                        return (
                            <ListItem key={`${item.accountId}-${index}`} >
                                <div className="img_wrapper" >
                                    <img src={`${item.picUrl}?param=300x300`} width="100%" height="100%" alt="music" />
                                </div>
                                <span className="name" >{item.name}</span>
                            </ListItem>
                        )
                    })
                }
            </List>
        );
    }



    return (
        <div>
            <NavContainer>
                <Horizen oldVal={category} handleClick={(val: any) => handleUpdateCatetory(val)} list={categoryTypes} title={"分类 (默认热门):"}></Horizen>
                <Horizen oldVal={alpha} handleClick={(val: any) => handleUpdateAlpha(val)} list={alphaTypes} title={"首字母:"}></Horizen>
            </NavContainer>
            <ListContainer>
                    { renderSingerList() }
            </ListContainer>
        </div>
    );
}

export default React.memo(Singers);
